<template>
	<!-- 结算审核资料-->
	<div class="optimization">
		<!-- 头部 -->
		<div class="optimizationTop">
			<div class="optimization_logo">
				<img src="../../static/image/16557845140690910146.png" alt="">
			</div>
			<div class="optimization_title">
				<div class="title_left">结算审核资料</div>
				<div class="title_right">
					<div class="title_right-left" @click="infodiv">
						<div>
							<el-avatar size="small" :src="this.address"></el-avatar>
						</div>
						<div>{{this.username}}</div>
					</div>
					<div class="line"></div>
					<div class="loout" @click="lyout">退出</div>
				</div>
			</div>
			<div class="active">
				<img src="../../static/image/16557845125699707747.png" alt="">
			</div>
		</div>
		<!-- 左侧导航栏 -->
		<div class="left">
			<ul>
				<li @click="sheji()">设计优化</li>
				<li @click="shenhe()">审核/合同签约</li>
				<li class="activeLi">结算审核资料</li>
				<li @click="baogao()">我的报告</li>
			</ul>

		</div>
		<ul class="leftIcon">
			<li class="activeIconLi">
				<img src="../../static/image/16557845125746053644.png" alt="">
			</li>
		</ul>
		<!-- 内容部分 -->
		<div class="content">
			<div class="con_information">
				<!-- 订单信息 -->
				<div class="con_information_top">
					<span>
						<img src="../../static/image/16557845125786128394.png" alt="">
					</span>
					<span>订单信息</span>
				</div>
				<div class="con_information_text">
					<ul>
						<li>订单号：{{infodata.ordersNumber}}</li>
						<li>类型：{{infodata.ordersType}}</li>
						<li>下单时间：{{infodata.ordersTime}}</li>
						<li>下单金额：<span style="color: rgb(254, 100, 26);">￥{{infodata.payableMoney}}</span></li>
					</ul>
				</div>
			</div>
			<div class="con_desc">
				<div class="desc_drawing">
					<div class="drawing_title">
						<div class="con_information_top">
							<span>
								<img src="../../static/image/16557845125786128394.png" alt="">
							</span>
							<span>合同、预算清单</span>
						</div>
					</div>
					<div class="drawing_Table" >
						
						<el-table :data="tableData" stripe style="width: 100%">
							<el-table-column prop="name" label="报告名称" width="250">
							</el-table-column>
							<el-table-column prop="createDate" label="上传时间" width="250">
							</el-table-column>
							<el-table-column prop="address" label="报告地址">
							</el-table-column>
						</el-table>
					</div>
				</div>

			</div>
		</div>
		<el-dialog title="" :visible.sync="dialogTableVisible" center :append-to-body='true' :lock-scroll="false"
			width="40%">
			<div class="info">
				<div class="infopic">
					<img :src="this.address" alt="" alt="">
				</div>
				<div class="name" style="margin-top: 10px;color: #333;">{{this.username}}</div>
				<div class="name" style="color: #999;">2021-08-16 09:25:30</div>
			</div>
			<div class="img_6">
				<div @click="ZHinfo">
					<el-dropdown-item style="color: #1C62F9;">账号信息</el-dropdown-item>
				</div>
				<div @click="switchome">
					<el-dropdown-item style="color: #fff;">切换房屋</el-dropdown-item>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'optimization',
		data() {
			return {
				tableData: [],
				dialogTableVisible: false,
				fileList: [],
				infodata:''
			}
		},
		beforeCreate() {
			document.querySelector('body').setAttribute('style', 'background-color:#f6f7f9')
		},
		beforeDestroy() {
			document.querySelector('body').removeAttribute('style')
		},
		created() {
			this.address = localStorage.getItem('address');
			this.username = localStorage.getItem('name');
			this.getdata()
		},
		methods: {
			successSub(file){
				console.log(file)
				console.log('上传成功')
				this.$refs.upload.submit();
			},
			// submitUpload() {
			// 	this.$refs.upload.submit();
			// },
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
			 console.log(file);
			},
			switchome() {
				this.$router.push({
					path: '/switchome'
				})
				this.dialogTableVisible = false;
			},
			ZHinfo() {
				this.$router.push({
					path: '/ZHinfo'
				}) // 带
				this.dialogTableVisible = false;
			},
			infodiv() {
				this.dialogTableVisible = true;
			},
			getdata(){
				this.$axios({
					method: 'get',
					url: this.$api + '/app1/settlementData/information',
					data: {},
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(res => {
					console.log(res,'res')
					if (res.data.code == 200) {
						this.infodata = res.data.data;
						this.tableData = res.data.data.reports;
					} else {
						this.$message({
						  type: 'info',
						  message: res.data.msg
						});
					}
				})
			},
			lyout() {
				this.$axios({
					method: 'post',
					url: this.$api + '/app3/consumer/quit',
					data: {},
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.$message({
						  type: 'success',
						  message: '退出成功！'
						});
						var storage = window.localStorage;
						storage.clear();
						this.$router.push('/')
					} else {
						var storage = window.localStorage;
						storage.clear();
						this.$router.push('/')
					}
				})
			},
			shenhe() {
				this.$router.push('/examine')
			},
			baogao() {
				this.$router.push('/report')
			},
			sheji() {
				this.$router.push('/optimization')
			}
		}
	}
</script>


<style scoped>
	ul li {
		list-style: none;
		color: #fff;
		padding: 0;
		margin: 0;
	}

	.optimizationTop {
		width: 100%;
		height: 36px;
		background-color: rgba(29, 106, 255, 1);
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
		display: flex;

	}

	.el-button--text {
		color: #333 !important;
	}

	.optimization_logo {
		width: 55px;
		height: 20px;
		margin-top: 6px;
		margin-left: 30px;
	}

	.optimization_logo img {
		width: 100%;
		height: 100%;
	}

	.optimization_title {
		width: 89%;
		color: #fff;
		margin-left: 2.8%;
		display: flex;
		line-height: 36px;
		justify-content: space-between;
	}

	.title_left {
		width: 20%;
		font-size: 14px;
		text-align: center;
	}

	.title_right-left {
		display: flex;
		font-size: 14px;
		/* width: 60px; */
		justify-content: space-between;
	}

	.el-avatar--small {
		margin-top: 10%;
		margin-right: 5px;
	}

	.title_right {
		display: flex;
		font-size: 14px;
	}

	.line {
		width: 1px;
		height: 10px;
		background-color: #fff;
		margin-top: 13px;
		margin-left: 20px;
	}

	.loout {
		width: 70px;
		text-align: center;
	}

	.active {
		position: absolute;
		top: 21px;
		left: 15%;
		width: 50px;
		height: 3px;
	}

	.active img {
		width: 100%;
		height: 100%;
	}

	/*  */
	.left {
		position: absolute;
		left: 0;
		top: 0;
		width: 120px;
		height: 100%;
		background-color: rgb(0, 14, 38);
		z-index: 9;
	}

	.left ul {
		margin-top: 55px;
		padding-left: 0;
		text-align: center;
	}

	.left ul li {
		text-align: center;
		font-size: 14px;
		height: 40px;
		line-height: 40px;
	}

	.activeLi {
		background-color: rgb(7, 36, 90);
	}

	.leftIcon {
		position: absolute;
		top: 14%;
		left: -39px;
	}

	.activeIconLi {
		width: 5px;
		height: 20px;
	}

	.activeIconLi img {
		width: 100%;
		height: 100%;
	}

	/*  */
	.content {
		width: 90%;
		height: 85%;
		position: absolute;
		top: 7%;
		left: 8%;
	}

	.con_information {
		background-color: #fff;
		width: 99%;
		padding: 10px;
		border-radius: 8px;
	}

	.con_information_top {
		font-size: 18px;
		margin-top: 10px;
	}

	.con_information_top span:first-child {
		width: 20px;
		height: 20px;
	}

	.con_information_top img {
		width: 18px;
		height: 10px;
	}

	.con_information_text {
		margin-top: 15px;
		padding: 15px 0;
	}

	.con_information_text ul {
		display: flex;
		padding-left: 12px;
	}

	.con_information_text ul li {
		list-style: none;
		width: 30%;
		color: #333;
		font-size: 15px;
	}

	.con_Feedback {
		padding: 10px;
		margin-top: 20px;
		background-color: #fff;
		border-radius: 8px;
	}

	.Feedback_list {
		width: 97%;
		margin: 0 auto;
		border: 1px solid rgb(29, 1.6, 255);
		border-radius: 8px;
		margin-top: 20px;
		background-color: rgb(244, 247, 255);
		font-size: 12px;
		padding: 0 10px;
	}

	.Feedback_list div {
		height: 40px;
		line-height: 40px;
	}

	.Feedback_list div:first-child {
		border-bottom: 1px solid #1d6aff1f;
	}

	.Feedback_list span {
		color: rgb(29, 106, 255);
	}

	.con_desc {
		display: flex;
		justify-content: space-between;
		margin-top: 15px;
	}

	.desc_drawing {
		width: 100%;
		background-color: #fff;
		padding: 0 10px;
	}

	.drawing_title {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.desc_demand {
		width: 48%;
		background-color: #fff;
		padding: 0 10px;
	}

	.drawing_btn {
		display: flex;
		margin-top: 10px;
	}

	.drawing_btn div {
		width: 80px;
		height: 30px;
		border: 1px solid #eee;
		font-size: 14px;
		text-align: center;
		line-height: 30px;
		border-radius: 4px;
	}

	.drawing_btn div:first-child {
		background-color: rgb(244, 247, 255);
		color: rgb(29, 106, 255);
		margin-right: 15px;
	}

	.drawing_btn div:last-child {
		background-color: #1c62f9;
		color: #fff;
	}

	.drawing_Table {
		width: 98%;
		margin: 0 auto;
		margin-top: 20px;
		
	}

	.text_84 {
		color: #ff371d;
		font-size: 0.75rem;
		font-family: '.AppleSystemUIFont';
		height: 40px;
		line-height: 40px;
	}

	.con_btn {
		display: flex;
		justify-content: space-between;
		width: 40%;
		margin: 0 auto;
		margin-top: 50px;
		font-size: 1rem;
	}

	.cencel {
		width: 250px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-radius: 38px;
		border: 1px solid #eee;
		background-color: #fff;
	}

	.submit {
		width: 250px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-radius: 38px;
		background-color: #1d6aff;
		color: #fff;
	}
</style>
